<template>
	<view class="content">
		<view class="list">
			<view class="list_wrap">
				<u-row gutter="16">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">身高</view>
							<view class="content">{{ userData.height === null ? "暂未填写" : userData.height + 'cm' }}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">体重</view>
							<view class="content">{{ userData.weight === null ? "暂未填写" : userData.weight + 'kg' }}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">年龄</view>
							<view class="content">{{ userData.age === null ? "暂未填写" : userData.age + '岁' }}</view>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">职业</view>
							<view class="content">{{ userData.job === '' ? "暂未填写" : userData.job }}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">性别</view>
							<view class="content">{{ userData.sex | toSex }}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">预算</view>
							<view class="content">{{ userData.budget === '' ? "暂未填写" : userData.budget }}</view>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">出席场合</view>
							<view class="content">{{ isBlank(userData.occasion) ? "暂未填写" : userData.occasion }}</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="title">预算</view>
							<view class="content">{{  isBlank(userData.brand) ? "暂未填写" : userData.brand }}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<view class="list" style="margin-top: 32upx;">
			<view class="flex_row" style="justify-content: space-between;">
				<view class="userinfoBox_2 flex_col">
					<view class="title">肤色</view>
					<image class="userinfoBox_2_img" :src="userData.skinColour | skinColour" mode="aspectFit"></image>
					<view class="content">{{ userData.skinColour | skinColourText }}</view>
				</view>
				<view class="userinfoBox_2 flex_col">
					<view class="title">脸型</view>
					<image class="userinfoBox_2_img" :src="userData.face | face" mode="aspectFit"></image>
					<view class="content">{{ userData.skinColour | faceText }}</view>
				</view>
				<view class="userinfoBox_2 flex_col">
					<view class="title">体型</view>
					<image class="userinfoBox_2_img" :src="userData.shape | shape" mode="aspectFit"></image>
					<view class="content">{{ userData.skinColour | shapeText }}</view>
				</view>
			</view>
		</view>


		<view class="photo_area">
			<view class="start">
				<view class="title">照片</view>
				<view class="cetifica_img_none" v-if="userData.photos.length === 0">
					<view style="color: #666666">用户暂未上传图片</view>
				</view>
				<view v-else class="cetifica_img">
					<view v-for="(item, index) in userData.photos" :key="index" class="img_box" @tap="showImg(index)">
						<u-image width="164rpx" height="164rpx" :src="item" mode="aspectFit" border-radius="8">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</view>
			</view>
		</view>

		<view class="out_title">备注</view>
		<view class="list">
			<view style="padding: 16upx 20upx;">
				{{ isBlank(userData.remark) ? '用户暂未填写备注' : userData.remark }}
			</view>
		</view>

		<view class="btn_area mocup_btn" v-if="orderId !== null && buyerUserId !== null" @click="createPlan">创建方案</view>
	</view>
</template>

<script>
	import app from '../../../App.vue'
	import {
		isBlank
	} from '@/utils/common.js'

	export default {
		data() {
			return {
				userData: {
				},
				userId: null,
				orderId: null
			};
		},
		filters: {
			face(val) {
				switch (val) {
					case null:
						return "/pagesB/static/img/default.png"
						break;
					case 0:
						return app.globalData.base_ImgUrl + 'ques2_01_man.png';
						break;
					case 1:
						return app.globalData.base_ImgUrl + 'ques2_02_man.png';
						break;
					case 2:
						return app.globalData.base_ImgUrl + 'ques2_03_man.png';
						break;
					case 3:
						return app.globalData.base_ImgUrl + 'ques2_04_man.png';
						break;
					case 4:
						return app.globalData.base_ImgUrl + 'ques2_01.png';
						break;
					case 5:
						return app.globalData.base_ImgUrl + 'ques2_02.png';
						break;
					case 6:
						return app.globalData.base_ImgUrl + 'ques2_03.png';
						break;
					case 7:
						return app.globalData.base_ImgUrl + 'ques2_04.png';
						break;
				}
			},
			faceText(val) {
				switch (val) {
					case null:
						return ""
						break;
					case 0:
						return '圆脸';
						break;
					case 1:
						return '鹅蛋脸';
						break;
					case 2:
						return '瓜子脸';
						break;
					case 3:
						return '方脸';
						break;
					case 4:
						return '圆脸';
						break;
					case 5:
						return '鹅蛋脸';
						break;
					case 6:
						return '瓜子脸';
						break;
					case 7:
						return '方脸';
						break;
				}
			},
			skinColour(val) {
				switch (val) {
					case null:
						return "/pagesB/static/img/default.png"
						break;
					case 0:
						return app.globalData.base_ImgUrl + 'ques3_01_man.png';
						break;
					case 1:
						return app.globalData.base_ImgUrl + 'ques3_02_man.png';
						break;
					case 2:
						return app.globalData.base_ImgUrl + 'ques3_03_man.png';
						break;
					case 3:
						return app.globalData.base_ImgUrl + 'ques3_04_man.png';
						break;
					case 4:
						return app.globalData.base_ImgUrl + 'ques3_01.png';
						break;
					case 5:
						return app.globalData.base_ImgUrl + 'ques3_02.png';
						break;
					case 6:
						return app.globalData.base_ImgUrl + 'ques3_03.png';
						break;
					case 7:
						return app.globalData.base_ImgUrl + 'ques3_04.png';
						break;
				}
			},
			skinColourText(val) {
				switch (val) {
					case null:
						return ""
						break;
					case 0:
						return '偏白';
						break;
					case 1:
						return '红润';
						break;
					case 2:
						return '偏黄';
						break;
					case 3:
						return '小麦色';
						break;
					case 4:
						return '偏白';
						break;
					case 5:
						return '红润';
						break;
					case 6:
						return '偏黄';
						break;
					case 7:
						return '小麦色';
						break;
				}
			},
			shape(val) {
				switch (val) {
					case null:
						return "/pagesB/static/img/default.png"
						break;
					case 0:
						return app.globalData.base_ImgUrl + 'ques4_01_man.png';
						break;
					case 1:
						return app.globalData.base_ImgUrl + 'ques4_02_man.png';
						break;
					case 2:
						return app.globalData.base_ImgUrl + 'ques4_03_man.png';
						break;
					case 3:
						return app.globalData.base_ImgUrl + 'ques4_04_man.png';
						break;
					case 4:
						return app.globalData.base_ImgUrl + 'ques4_05_man.png';
						break;
					case 5:
						return app.globalData.base_ImgUrl + 'ques4_01.png';
						break;
					case 6:
						return app.globalData.base_ImgUrl + 'ques4_02.png';
						break;
					case 7:
						return app.globalData.base_ImgUrl + 'ques4_03.png';
						break;
					case 8:
						return app.globalData.base_ImgUrl + 'ques4_04.png';
						break;
					case 9:
						return app.globalData.base_ImgUrl + 'ques4_05.png';
						break;
					case 10:
						return app.globalData.base_ImgUrl + 'ques4_06.png';
						break;
				}
			},
			shapeText(val) {
				switch (val) {
					case null:
						return ""
						break;
					case 0:
						return '长方形';
						break;
					case 1:
						return '正三角形';
						break;
					case 2:
						return '椭圆形';
						break;
					case 3:
						return '倒三角形';
						break;
					case 4:
						return '倒梯形';
						break;
					case 5:
						return '苹果型';
						break;
					case 6:
						return 'H型';
						break;
					case 7:
						return '梨型';
						break;
					case 8:
						return '沙漏型';
						break;
					case 9:
						return 'H型2';
						break;
					case 10:
						return 'V型';
						break;
				}
			},
			toSex(val) {
				if (val === 0) {
					return "男";
				} else if(val === 1) {
					return "女";
				} else {
					return "暂未填写"
				}
			},
		},
		onLoad(options) {
			this.userId = options.userId
			if(options.orderId) {
				this.orderId = options.orderId
			}

			this.getUserInfo()
		},
		methods: {
			isBlank,
			getUserInfo() {
				var param = {
					userId: this.userId
				}
				this.$u.api.getWearData(param).then(res => {
					if (res.code === 200) {
						if(res.data === null) {
							this.userData = {
								age: null,
								budget: "",
								face: null,
								height: null,
								job: "",
								photos: [],
								remark: "",
								sex: null,
								shape: null,
								skinColour: null,
								weight: null,
								brand: '',
								occasion: '',
							}
						}else {
							this.userData = res.data
							if (!isBlank(this.userData.photos)) {
								this.userData.photos = JSON.parse(this.userData.photos)
							} else {
								this.userData.photos = []
							}
						}
					}
				})
			},
			// 打开大图
			showImg(index) {
				uni.previewImage({
					urls: this.userData.photos,
					loop: true,	
					current: index
				});
			},
			// 创建方案
			createPlan() {
				// 调用接口通知用户
				var data = {
					orderId: this.orderId
				}
				this.$u.api.startMakeScheme(data).then(res => {
					if (res.code === 200) {
						// 调用接口
						uni.navigateTo({
							url: "/pagesB/pages/wearPlan/createPlan?orderId=" +  this.orderId + "&buyerUserId=" + this.userId
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.icon {
		font-size: 30upx;
	}

	.title {
		font-size: 32upx;
		color: #333;
		font-weight: bold;
	}

	.out_title {
		font-size: 30upx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #555555;
		padding: 32upx 0 12upx 0;
	}

	.content {
		padding: 32upx 30upx 43upx 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 12upx;

		.list {
			background: white;

			.list_wrap {
				.u-row {
					margin: 40rpx 0;
				}

				.demo-layout {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.title {
						font-size: 32upx;
					}

					.content {
						font-size: 26upx;
						color: #666666;
						padding-top: 8upx;
						text-align: center;
					}
				}
			}

			.row {
				padding: 32upx 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					border-bottom: none;
				}

				.right {
					display: flex;
					align-items: center;
					color: #999;

					.tis {
						font-size: 26upx;
						margin-right: 5upx;
						max-height: 120upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.icon {
						width: 42upx;
						color: #909090;
					}
				}
			}
		}
	}

	.photo_area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32upx;

		.title {
			font-size: 28upx;
			font-weight: bold;
			padding-bottom: 12upx;
		}


		.start {
			.cetifica_img {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				.img_box {
					margin-right: 20upx;
				}
			}

			.cetifica_img_none {
				width: 164upx;
				height: 164upx;
				background: #F4F4F4;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 22upx;
				padding: 10upx;
			}
		}
	}


	.userinfoBox_2 {
		padding: 20upx 32upx;
		color: #333333;

		.title {
			font-size: 32upx;
		}

		.content {
			font-size: 26upx;
		}

		.userinfoBox_2_img {
			width: 116upx;
			height: 128upx;
			margin: 21upx 0 32upx 0;
		}
	}

	// 更多选择

	// 选中样式
	.select_Border {
		border: 3px solid #B1BEFD;
		border-radius: 20upx;
	}

	.wrap {
		padding: 0upx;

		.u-row {
			margin: 20rpx 0;
		}

		.demo-layout {
			height: 335upx;
			margin-bottom: 20upx;
			border-radius: 12x;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 191upx;
				height: 220upx;
			}
		}

		.demo-layout2 {
			height: 216upx;
			margin-bottom: 20upx;
			border-radius: 12x;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 51upx;
				height: 161upx;
			}
		}

		.wrap_text {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 12upx 0 25upx 0;
			color: #666666;
			font-size: 26upx;
		}

		.bg-purple-light {
			background: white;
		}
	}


	.btn_area {
		width: 690upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		margin: 53upx auto 0 auto;
	}
</style>
